<template>
  <view class="reserve-container">
    <view class="top-bar">
      <u-icon name="arrow-left" size="28" color="#333" @click="$navigateBack()" />
      <text class="title">业务预订</text>
    </view>
    <view class="form-section">
      <u-select v-model="form.type" :list="typeList" placeholder="请选择业务类型" />
      <u-select v-model="form.store" :list="storeList" placeholder="请选择门店" />
      <u-picker mode="datetime" :params="dateTimeParams" @confirm="handleDateTimeConfirm"></u-picker>
      <u-input v-model="form.num" placeholder="请输入人数" type="number" />
      <u-button type="primary" shape="circle" @click="submit">提交预订</u-button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'OrderReserve',
  data() {
    return {
      form: {
        type: '',
        store: '',
        time: '',
        num: ''
      },
      typeList: ['棋牌', '台球', 'KTV', '影吧'],
      storeList: ['雀发潮旗舰店', '欢乐台球城']
    }
  },
  methods: {
    submit() {
      // 校验并提交逻辑
      uni.showToast({ title: '预订成功', icon: 'success' })
      this.$navigateBack()
    }
  }
}
</script>

<style scoped>
.reserve-container { min-height: 100vh; background: #f8f8f8; }
.top-bar { display: flex; align-items: center; padding: 32rpx; }
.title { font-size: 36rpx; font-weight: bold; margin-left: 24rpx; }
.form-section { display: flex; flex-direction: column; gap: 32rpx; margin: 48rpx 32rpx; }
</style>
